<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1.0, user-scalable=no，viewport-fit=cover">
    <meta name="format-detection" content="telephone=no"/>
    <title></title>
    <style type="text/css">

    </style>
</head>
<body>
<div id="main" style="display: flex;font-size: 38px;">
    <div style="width: 33.3%;">
        <table style="width: 100%;color:#FFFFFF">
            <tr>
                <th style="background-color:#CD4339;width: 50%;">品名</th>
                <th style="background-color:#CD4339;width: 50%;">售价</th>
            </tr>
        </table>
        <table style="width: 100%;color:#FFFFFF" id="list1">

        </table>
    </div>
    <div style="width: 33.3%;">
        <table style="width: 100%;color:#FFFFFF">
            <tr>
                <th style="background-color:#CD4339;width: 50%;">品名</th>
                <th style="background-color:#CD4339;width: 50%;">售价</th>
            </tr>
        </table>
        <table style="width: 100%;color:#FFFFFF" id="list2">

        </table>
    </div>
    <div style="width: 33.3%;">
        <table style="width: 100%;color:#FFFFFF">
            <tr>
                <th style="background-color:#CD4339;width: 50%;">品名</th>
                <th style="background-color:#CD4339;width: 50%;">售价</th>
            </tr>
        </table>
        <table style="width: 100%;color:#FFFFFF" id="list3">

        </table>
    </div>
</div>
</body>
<script type="text/javascript">
    function httpRequest(paramObj, callback, errFun) {
        var xmlhttp = null;
        /*创建XMLHttpRequest对象，
         *老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：new ActiveXObject("Microsoft.XMLHTTP")
         * */
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        /*判断是否支持请求*/
        if (xmlhttp == null) {
            alert('你的浏览器不支持XMLHttp');
            return;
        }
        /*请求方式，并且转换为大写*/
        var httpType = (paramObj.type || 'GET').toUpperCase();
        /*数据类型*/
        var dataType = paramObj.dataType || 'json';
        /*请求接口*/
        var httpUrl = paramObj.httpUrl || '';
        /*是否异步请求*/
        var async = paramObj.async || true;
        /*请求参数--post请求参数格式为：foo=bar&lorem=ipsum*/
        var paramData = paramObj.data || [];
        var requestData = '';
        for (var name in paramData) {
            requestData += name + '=' + paramData[name] + '&';
        }
        requestData = requestData == '' ? '' : requestData.substring(0, requestData.length - 1);

        /*接口连接，先判断连接类型是post还是get*/
        if (httpType == 'GET') {
            xmlhttp.open("GET", httpUrl, async);
            xmlhttp.send(null);
        } else if (httpType == 'POST') {
            xmlhttp.open("POST", httpUrl, async);
            //发送合适的请求头信息
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.send(requestData);
        }

        /*请求接收*/
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                /*成功回调函数*/
                callback(xmlhttp.responseText);
            } else {
                /*失败回调函数*/
                errFun;
            }
        }
    }

    var timeStr = "暂无更新时间";
    var Interval;
    window.onload = function () {
        getdata('/api/getsingleactiveskus');
        setInterval(function () {
            window.clearInterval(Interval);
            getdata('/api/getsingleactiveskus');
        }, 300000);

        setInterval(function () {
            location.reload()
        }, 1200000)

        let clientHeight = (window.innerHeight - 46) / 11;
        let div = document.getElementById("main");
        var fontsize = (3 * clientHeight / 4 - 10);
        if (fontsize > 38) {
            fontsize = 38;
        }
        div.style.fontSize = fontsize + 'px';
        let trElList = document.querySelectorAll('table tr');
        trElList.forEach((item, index) => {
            item.style.height = clientHeight + 'px';
        })
    }

    function getdata(url) {
        /*请求参数*/
        var paramObj = {
            httpUrl: 'http://' + window.location.host + url,
            type: 'get',
        }
        /*请求调用*/
        httpRequest(paramObj, function (respondDada) {
            //这里编写成功的回调函数
            respondDada = JSON.parse(respondDada)
            if (respondDada.code == 0) {
                if (document.getElementById("alertbgDiv")) {
                    closewin()
                }
                var list = []
                if (respondDada.data) {
                    list = respondDada.data
                }
                getdata1('/api/getpromotionskus', list);
            } else if (respondDada.code == 3) {
                createdom([])
                timeStr = respondDada.lastUpdateTime
                if (document.getElementById("alertbgDiv")) {
                    closewin()
                }
                Alert()
            } else if (respondDada.code == -1) {
                getdata1('/api/getpromotionskus', []);
            }
        }, function () {
            alert('网络错误')
        });
    }

    function getdata1(url, data) {
        /*请求参数*/
        var paramObj = {
            httpUrl: 'http://' + window.location.host + url,
            type: 'get',
        }
        /*请求调用*/
        httpRequest(paramObj, function (respondDada) {
            respondDada = JSON.parse(respondDada)
            //这里编写成功的回调函数
            if (respondDada.code == 0) {
                if (document.getElementById("alertbgDiv")) {
                    closewin()
                }
                var list = []
                if (respondDada.data) {
                    list = respondDada.data
                }
                createdata(list, data)
            } else if (respondDada.code == 3) {
                createdom([])
                timeStr = respondDada.lastUpdateTime
                if (document.getElementById("alertbgDiv")) {
                    closewin()
                }
                Alert()
            } else if (respondDada.code == -1) {
                createdata([], data)
            }

        }, function () {
            alert('网络错误')
        });
    }

    var alllist = new Array()

    function createdata(respondDada, data) {
        var list = []
        var list1 = []
        var cuxiaolist = respondDada

        if (data.length > 0) {
            list = data.splice(0, 30)
        }

        if (data.length > 0) {
            list1 = data.splice(0, 30)
        }


        alllist = []
        if (list.length > 0) {
            alllist.push({
                list: list
            })
        }

        if (list1.length > 0) {
            alllist.push({
                list: list1
            })
        }


        if (cuxiaolist.length > 0) {
            alllist.push({
                list: cuxiaolist
            })
        }

        if (alllist.length > 0) {
            createdom(alllist[0].list)
        }


        var i;

        if (alllist.length == 1) {
            i = 0
        } else if (alllist.length >= 2) {
            i = 1
        }

        Interval = setInterval(function () {
            if (alllist.length > 0) {
                createdom(alllist[i].list)
            }

            if (i >= alllist.length - 1) {
                i = -1
            }
            i++;
        }, 30000);
    }


    function createdom(list) {
        document.getElementById("list1").innerHTML = "";
        document.getElementById("list2").innerHTML = "";
        document.getElementById("list3").innerHTML = "";
        let clientHeight = (window.innerHeight - 46) / 11;
        var j = 0
        for (var i = 0; i < list.length; i++) {
            var price;
            if (list[i].categoryid.indexOf("030") != -1) {
                price = list[i].originalprice;
            } else {
                price = list[i].promotionprice;
            }
            var saleunit;

            if (list[i].weightflag == true) {
                price = price / 2;
                var y = String(price).indexOf(".") + 1;//获取小数点的位置
                if (y > 0) {
                    var count = String(price).length - y;//获取小数点后的个数
                    if (count == 3) {
                        price = Math.ceil(price * 100) / 100;
                    }
                }
                saleunit = "500g";
            } else {
                saleunit = list[i].saleunit;
            }

            var tr = document.createElement('tr');
            var fontSize = '';
            if (list[i].skuname.length > 5) {
                var size = (3 * clientHeight / 4 - 10);
                size = 3 * size / 4;
                if (size > 38) {
                    size = 3 * 38 / 4;
                }
                fontSize = 'font-size: ' + size + 'px;';
            }
            var htmlstr = '<td style="background-color:#000000;width: 50%;text-align: center;' + fontSize + '">' + list[i].skuname +
                '</td><td style="background-color:#000000;width: 50%;text-align: center;">' + price + '<span style="font-size: 20px">元/' + saleunit +
                "</span></td>";
            tr.innerHTML = htmlstr;
            if (j == 0) {
                document.getElementById("list1").appendChild(tr)
            } else if (j == 1) {
                document.getElementById("list2").appendChild(tr)
            } else {
                document.getElementById("list3").appendChild(tr)
                j = -1
            }
            j++;
        }


        let div = document.getElementById("main");
        var fontsize = (3 * clientHeight / 4 - 10);
        if (fontsize > 38) {
            fontsize = 38;
        }
        div.style.fontSize = fontsize + 'px';
        let trElList = document.querySelectorAll('table tr');
        trElList.forEach((item, index) => {
            item.style.height = clientHeight + 'px';
        })
    }

    function Alert() {
        var msgw, msgh, bordercolor;
        msgw = 700; //提示窗口的宽度
        msgh = 360; //提示窗口的高度
        titleheight = 25 //提示窗口标题高度
        bordercolor = "#336699"; //提示窗口的边框颜色
        titlecolor = "#99CCFF"; //提示窗口的标题颜色
        var sWidth, sHeight;
        //获取当前窗口尺寸
        sWidth = document.body.offsetWidth;
        sHeight = document.body.offsetHeight;
        //    //背景div
        var bgObj = document.createElement("div");
        bgObj.setAttribute('id', 'alertbgDiv');
        bgObj.style.position = "absolute";
        bgObj.style.top = "0";
        bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
        bgObj.style.opacity = "0.6";
        bgObj.style.left = "0";
        bgObj.style.width = sWidth + "px";
        bgObj.style.height = sHeight + "px";
        bgObj.style.zIndex = "10000";
        document.body.appendChild(bgObj);
        //创建提示窗口的div
        var msgObj = document.createElement("div")
        msgObj.setAttribute("id", "alertmsgDiv");
        msgObj.setAttribute("align", "center");
        msgObj.style.background = "white";
        msgObj.style.border = "1px solid " + bordercolor;
        msgObj.style.position = "absolute";
        msgObj.style.left = "50%";
        msgObj.style.font = "14px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
        //窗口距离左侧和顶端的距离
        msgObj.style.marginLeft = "-350px";
        //窗口被卷去的高+（屏幕可用工作区高/2）-150
        msgObj.style.top = document.body.scrollTop + (window.screen.availHeight / 2) - 200 + "px";
        msgObj.style.width = msgw + "px";
        msgObj.style.height = msgh + "px";
        msgObj.style.textAlign = "center";
        msgObj.style.lineHeight = "25px";
        msgObj.style.zIndex = "10001";
        document.body.appendChild(msgObj);
        //提示信息标题
        var title = document.createElement("p");
        title.setAttribute("id", "alertmsgTitle");
        title.setAttribute("align", "left");
        title.style.margin = "0";
        title.style.padding = "20px";
        title.style.background = bordercolor;
        title.style.filter =
            "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
        title.style.opacity = "0.75";
        title.style.border = "1px solid " + bordercolor;
        title.style.font = "25px Verdana, Geneva, Arial, Helvetica, sans-serif";
        title.style.color = "white";
        title.innerHTML = "提示信息";
        document.getElementById("alertmsgDiv").appendChild(title);
        //提示信息
        var txt = document.createElement("p");
        txt.setAttribute("id", "msgTxt");
        txt.style.margin = "70px 20px 0 20px";
        txt.setAttribute("align", "left");
        txt.style.fontSize = "22px";
        var str =
            "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发现电视屏商品价格数据长时间未更新，请确认您所使用的安卓收银机的“钱大妈收银”软件处于登录状态。(电视屏数据由安卓收银机下发，如果“钱大妈收银”软件未登录，则无法正常下发数据。）<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最近数据更新时间：" +
            timeStr;
        txt.innerHTML = str;
        document.getElementById("alertmsgDiv").appendChild(txt);
        //设置关闭时间
        // window.setTimeout("closewin()", 2000);
    }

    function closewin() {
        document.body.removeChild(document.getElementById("alertbgDiv"));
        document.getElementById("alertmsgDiv").removeChild(document.getElementById("alertmsgTitle"));
        document.body.removeChild(document.getElementById("alertmsgDiv"));
    }
</script>
</html>
